<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" v-loading="loading">
            <el-table-column prop="account" label="账号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="电话">
            </el-table-column>
            <el-table-column prop="email" label="邮件">
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 30px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :background="true" :current-page="pageNum"
             :page-size="pageSize" layout="total, prev, pager, next, sizes" :page-sizes="[10, 20, 30, 50]" :total="dataCount">
        </el-pagination>
    </div>
</template>

<script>
import {getPageList} from '@/api/userManager';

export default {
    created(){
        this.loadData();
    },
    data() {
        return {
            tableData: [],
            dataCount:0,
            pageSize:10,
            pageNum:1,
            loading:true
        }
    },
    methods:{
        async loadData(){
            this.loading = true;
            let param = {
                PageNum:this.pageNum,
                PageSize:this.pageSize
            }
            let result = await getPageList(param)
            if (result.code==10000) {
                let {data,count} = result
                this.tableData = data.data;
                this.dataCount = count
            }
            this.loading = false
        },

        handleSizeChange(pageSize){
            this.pageSize = pageSize
            this.loadData();
        },
        handleCurrentChange(pageNum){
            this.pageNum = pageNum
            this.loadData();
        }
    }
};
</script>

<style scoped>

</style>